<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tone莫斯码小测3.0</title>
    <script src="../libs/Tone.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/TimeFactory.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/p2.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            background-color: #000000;
        }
    </style>
</head>
<body>
    <script>
        var moonjs = new MoonJs();
        var canvas=moonjs.createCanvasByMobile();
        moonjs.init(canvas)
        moonjs.start();//开始渲染

        var canvasColor='#333333';
        canvas.style.backgroundColor=canvasColor;

        const cc='F6'
        var synth = new Tone.PolySynth(Tone.Synth).toDestination();

        var letters=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','单删','全删','确定','重置']
       
        var colors=ColorManager.warnCoolColors([2,3,5,6,9,10,11,9]);
        var [width,height]=[canvas.width,canvas.height];
        var [wid,hei,g]=[width/6,width/6,2];
        var [cx,cy]=[wid/2+g+5,hei/2+wid];
        let codes=[];
        let state=0;
        let fontSize=20;
        let maps=[];
        if(Unify.isMobile()) fontSize=50;

        
        let showLabel=moonjs.createRectText(' ',width,wid,'#fff',canvasColor);
        showLabel.childs[0].setFont(`${fontSize}px Arial`);
        showLabel.setXY(width/2,wid);
        
        let lightColors=['#000000','#ffffff']
        let lightRect=moonjs.createRect(width,height,lightColors[0],width*3);

        createMap();
        function createMap(){
            let y=0;
            for(let i=0;i<letters.length;i++){
                let name=letters[i];
                let color=colors[Math.floor(i%colors.length)];
                let rect=moonjs.createRectText(name,wid,hei,'#fff',color,'roundRect');
                rect.name=name;
                rect.childs[0].setFont(`${fontSize}px Arial`);
                moonjs.mouseTouch(rect,mouseDown,mouseUp);
                maps.push(rect);
            }
            Unify.displayRank(maps,6,0,0,wid/2,height-6*wid);
        }
        function mouseDown(o){
            let name=o.name;
            switch(name){
                case '单删':
                    codes.pop();
                    break;
                case '全删':
                    codes.length=0;
                    break; 
                 case '确定':
                    return;
                case '重置':
                    state=0;
                    codes.length=0;
                    break;
                default:
                    codes.push(name);
                    break;
            }
            // showLabel.childs[0].setText(codes.join(''));
            showLabel.t.setText(codes.join(''))
        } 
        function mouseUp(o){
            let name=o.name;
            switch(name){
                case '确定':
                    start();
                    return;
            }
        }
        var answers=[];
        function start(){
            let mosi=Unify.mosi(codes.join(''),0);
            console.log(mosi);
            if(state==0){
                if(codes.length==0)return;
                showLabel.t.setText('')
                answers.length=0;
                codes.forEach((item)=>{answers.push(item);});
                codes.length=0;
                lightRect.x=width/2;lightRect.y=height/2;
                lightRect.z=moonjs.worldZ();
                const str = mosi;
                let currentIndex = 0;
                function printCharacter() {
                    const currentChar = str[currentIndex];
                    if (currentChar === "-") {
                        console.log("-");
                        synth.triggerAttackRelease(cc, '4n');
                        lightRect.setColor(lightColors[1]);
                        setTimeout(nextCharacter, 600); // 过600秒执行下一个字符
                    } else if (currentChar === ".") {
                        console.log(".");
                        synth.triggerAttackRelease(cc, '64n');
                        lightRect.setColor(lightColors[1]);
                        setTimeout(nextCharacter, 200); // 过200秒执行下一个字符
                    } else if (currentChar === " ") {
                        setTimeout(nextCharacter, 1000);
                    }
                    currentIndex++;
                }
                function nextCharacter() {
                    lightRect.setColor(lightColors[0]);
                    if(currentIndex>=str.length){
                        state=1;
                        lightRect.x=width*3;
                    }else{
                        setTimeout(printCharacter, 100); // 挺止100秒后继续打印下一个字符
                    }
                }
                printCharacter(); // 开始打印第一个字符
                
            }else{
                let as=answers.join('');
                let bs=codes.join('');
                codes.length=0;
                console.log(as,bs,as==bs)
                if(as==bs){
                    synth.triggerAttackRelease('g7', '8n');
                    setTimeout(()=>alert("正确√√√"),500);
                    state=0;
                    answers.length=0;

                }else{
                    synth.triggerAttackRelease('g3', '8n');
                    setTimeout(()=>alert("错误×××"),500);
                }
                showLabel.t.setText('')
            }
        }

    </script>
</body>

</html>
